<template>
	<view class="content">
		<view class="top-banner-box">
			<!-- top banner -->
			<u-swiper :list="shopInfo.mer_banner" duration="1000" height="422" :circular="true"></u-swiper>
		</view>
		<view class="shop-info-box">
			<!-- 门店信息 -->
			<view class="shop-title-box" @click="unbind">
				<text>{{shopInfo.mer_name}}</text>
				<text class="bd" v-if="shopInfo.is_bind">已绑定</text>
			</view>
			<view class="bottom-plate-box">
				<view class="shop-address-phone-box">
					<view class="address-box">
						<view><image src="../static/icon7.png" mode="heightFix"></image></view>
						<text class="ellipsis2">{{shopInfo.mer_address}}</text>
					</view>
					<view class="phone-box flex-c" v-if="shopInfo.mer_phone">
						<image src="../static/icon8.png" mode="widthFix"></image>
						<text>{{shopInfo.mer_phone}}</text>
					</view>
				</view>
				<view class="shop-item-box flex-c-c">
					<view class="shop-icon-box" @click="bindClick(1)">
						<image src="../static/icon9.png" mode="widthFix"></image>
						<text>二维码</text>
					</view>
					<view class="shop-icon-box" @click="bindClick(2)">
						<image src="../static/icon8.png" mode="widthFix"></image>
						<text>电话</text>
					</view>
					<view class="shop-icon-box" @click="bindClick(3)">
						<image src="../static/icon7.png" mode="heightFix"></image>
						<text>导航</text>
					</view>
				</view>
			</view>
			<view class="shop-logo-box">
				<image :src="shopInfo.mer_logo" mode="aspectFill"></image>
			</view>
		</view>
		<view class="shop-goods-info-box">
			<!-- 产品、推荐、商品款式信息 -->
			<view class="banner-info-box" @click="goUrl">
				<image src="../../static/index_icon/icon2.png" mode="aspectFill"></image>
			</view>
			<view class="recommend-box">
				<u-section title="推荐" font-size="40" :show-line="false" @click="bindSeeMore" sub-title="查看更多"></u-section>
			</view>
			<view class="tabs-box">
				<u-tabs :list="list" :is-scroll="false" :current="current" inactive-color="#868686" bar-height="10"
				 height="80" item-width="290rpx" font-size="32" active-color="#333333" bar-width="125" @change="change"></u-tabs>
			</view>
			<view class="tabs-goods-list-box">
				<scroll-view class="scroll-view-x" scroll-x="true">
					<view class="goods-item-box" v-for="(item,index) in goodsList" :key="item.product_id" @click="goGoodsDetails(item.product_id)">
						<image :src="item.image" mode=""></image>
						<view class="bottom-goods-info">
							<text class="ellipsis">{{item.store_name}}</text>
							<text>￥{{item.price}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shop-follow-box">
			<view class="shop-follow-title-box">
				<text>更多资讯，敬请关注</text>
			</view>
			<view class="shop-qrCode-box">
				<view class="shop-qrCode-ct-box">
					<view class="shop-qrCode-item-box">
						<image src="../static/icon13.png" mode="aspectFill"></image>
					</view>
					<text>卡拉威官方微信</text>
				</view>
				<view class="shop-qrCode-ct-box">
				<view class="shop-qrCode-item-box">
					<image src="../static/icon14.png" mode="aspectFill"></image>
				</view>
					<text>ODYSSEY官方微信</text>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="500" height="480">
			<view class="mer-code">
				<image class="i" :src="shopCode" mode=""></image>
			</view>
		</u-popup>
		<view class="btnBox" v-if="shopInfo.is_bind">
			<u-button type="primary" @click="unbind" class="btn" :custom-style="{
			background: 'black',
			color: 'white',
			borderRadius: '50rpx'}">解除门店绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false,
				current: 0,
				shopCode:'',
				type:'new',//状态
				shopInfo:{},//门店信息
				goodsList:[],//门店商品信息
				merId:0,//门店ID
				list: [{name: '当季新款'}, {name: '口碑爆款'}, {name: '销量爆款'}],
				mer_id: '',
				merId: '',
			}
		},
		onLoad(options) {
			console.log('门店详情',options)
			uni.showLoading({title:"加载中"});
			const {
				merId,
				scene,
			} = options
			this.merId = merId || scene || ''
			scene && (this.mer_id = scene)
		},
		onShow() {
			this.getStoreDetail();
		},
		methods:{
			getStoreDetail(){
				let { merId, mer_id } = this;
				const param = {
					id: merId,
					mer_id: mer_id || uni.getStorageSync('mer_id') || '',
				}
				this.$u.api.storeDetailApi(param).then(res=>{
					if(res.code==1){
						console.log('门店详情：',res);
						res.data.mer_banner.forEach(res=>{
							res.image = res.path;
							delete res.path;
						});
						this.shopInfo = res.data;
						!this.goodsList.length && (this.goodsList = this.shopInfo.new);
						// 清除门店ID
						!res.data.code_bind && uni.removeStorageSync('mer_id')
					}else{
						this.$showToast(res.message||'获取门店信息失败！');
					}
				});
			},
			bindClick(status){
				if(status==1){
					this.shopCode = this.shopInfo.mer_code||'';
					if(!this.shopCode){
						this.$showToast('门店未上传二维码');
						return;
					}else{
						this.show = true;
					}
				}else if(status==2){
					uni.makePhoneCall({
						phoneNumber: this.shopInfo.mer_phone
					});
				}else{
					let {latitude,longitude,title} = this.shopInfo;
						uni.openLocation({
						latitude: Number(latitude),
						longitude:Number(longitude),
						name:title,
						success(res){
							console.log(res);	
						},
						fail() {
							console.log("err");
						}
					});
				}
			},
			change(index) {
				this.current = index;
				this.goodsList = [];
				switch (true){
					case index==0:
						this.goodsList = this.shopInfo.new;
						this.type = 'new';
						break;
					case index==1:
						this.goodsList = this.shopInfo.best;
						this.type = 'best';
						break;
					case index==2:
						this.goodsList = this.shopInfo.hot;
						this.type = 'hot';
						break;
				}
			},
			goGoodsDetails(goodsId){
				this.$gourl(`/pageCart/goodsInfo/goodsInfo?goodsId=${goodsId}&merId=${this.merId}`);
			},
			unbind(){
				uni.showModal({
					title: '是否确认解除绑定',
					success: res => {
						if (res.confirm) {
							this.$u.api.unbindApi().then(res=>{
								if(res.code==1){
									uni.showToast({
										title: '解绑成功',
										icon: 'success'
									})
									this.getStoreDetail()
								}else{
									this.$showToast(res.message||'解绑失败！');
								}
							});
						}
					}
				})
			},
			bindSeeMore(){//查看更多
				this.$gourl(`../goodsList/goodsStyleList?dynTitle=更多推荐&type=${this.type}&merId=${this.merId}`);
			},
			goUrl(){
				// this.$gourl(`/pageIndex/storeInfo/goodsDetails?merId=${this.merId}`);
				this.$gourl(`/pageIndex/productInfo/productInfo?merId=${this.merId}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnBox{
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		background: white;
		// z-index: 5;
		// padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)) 30rpx;
		padding: 20rpx 30rpx;
	}
	.content{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		background: #F5F5F5;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		.top-banner-box{height: 422rpx;}
		.shop-info-box{
			position: relative;
			padding: 30rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.shop-title-box{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
				.bd{
					margin-left: 20rpx;
					height: 50rpx;
					padding: 0 10rpx;
					background: #EDEDED;
					font-size: 26rpx;font-weight: bold;
					color: #333333;
					border-radius: 5rpx;
				}
			}
			.bottom-plate-box{
				display: flex;
				.shop-address-phone-box{
					flex: 0.7;
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
					image{width: 30rpx; height: 30rpx;margin-right: 10rpx;vertical-align: middle;}
					.address-box{
						display: flex;justify-content: flex-start;
						margin-bottom: 30rpx;
						max-width: 600rpx;
					}	
				}
				.shop-item-box{
					flex: 0.3;
					justify-content: space-between;align-items: flex-end;
					.shop-icon-box{
						display: flex; flex-direction: column;  align-items: center;
						font-size: 18rpx;
						font-weight: 400;
						color: #333333;
						image{width: 30rpx;height: 30rpx;margin-bottom: 10rpx;}
					}
				}
			}
			.shop-logo-box{
				position: absolute;
				top: -50rpx;
				right: 20rpx;
				line-height: 0;
				image{width: 160rpx; height: 160rpx;}
			}
		}
		.shop-goods-info-box{
			padding: 60rpx 20rpx 40rpx 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.banner-info-box{
				line-height: 0;
				margin-bottom: 50rpx;
				image{width: 100%;height: 300rpx;}
			}
			.recommend-box{
				margin-bottom: 30rpx;
				width: 100%;
			}
			.tabs-box{
				display: flex;
				justify-content: center;
				border-bottom: 1rpx solid #A8A8A9;
			}
			.tabs-goods-list-box{
				padding: 40rpx 0 0 0;
				.scroll-view-x{
					height: 400rpx;
					white-space: nowrap;
					.goods-item-box{
						width: 280rpx;
						height: 100%;
						margin-right: 20rpx;
						display: inline-block;
						line-height: 0;
						image{width: 100%; height: 280rpx;border-radius: 10rpx;}
						.bottom-goods-info{
							display: flex; flex-direction: column;
							padding: 20rpx 0rpx;
							font-size: 28rpx;
							font-weight: bold;
							line-height: normal;
							color: #333333;
							text:first-child{margin-bottom: 10rpx;}
						}
					}
				}
			}

		}
		.shop-follow-box{
			padding: 40rpx 40rpx 100rpx 40rpx;
			background: #fff;
			.shop-follow-title-box{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 50rpx;
			}
			.shop-qrCode-box{
				display: flex;
				justify-content: space-around;
				line-height: 0;
				.shop-qrCode-ct-box{
					text-align: center;
					.shop-qrCode-item-box{
						border: 1rpx solid #000;
						padding: 20rpx;
						image{width: 240rpx;height: 240rpx;}
						margin-bottom: 20rpx;
					}
					text{font-size: 26rpx;font-weight: bold;color: #333333;line-height: normal;}
				}
			}
		}
		.mer-code{
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			image{
				width: 400rpx;
				height: 400rpx;
			}
		}
	}
</style>